import React, { useState } from "react";

import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu";
import { AdvancedButtonProps } from "../AdvancedButton/AdvancedButton";
import { AdvancedButtonMap } from "../AdvancedButton/AdvancedButtonMap";
import { ActionElement, AdvancedButtonWrapperMap } from "../AdvancedButton/AdvancedButtonWrapper";

interface ActionMenuProps {
  children: React.ReactNode,
  actions?: AdvancedButtonProps[],
  wrapperActions?: ActionElement[],
  side?: 'top' | 'right' | 'bottom' | 'left',
  align?: 'start' | 'end' | 'center',
  content?: React.ReactNode,
}

export const ActionMenu = ({ children, actions, wrapperActions, side = 'right', align = 'start', content }: ActionMenuProps) => {
  const [showActionMenu, setShowActionMenu] = useState(false);

  return (
    <DropdownMenu open={showActionMenu} onOpenChange={setShowActionMenu}>
      <DropdownMenuTrigger asChild>
        {children}
      </DropdownMenuTrigger>
      <DropdownMenuContent onClick={(e) => {
        e.stopPropagation();
        setShowActionMenu(false);
      }} className="z-[99]" side={side} align={align} >
        <AdvancedButtonMap actions={actions} />
        <AdvancedButtonWrapperMap setShowActionMenu={setShowActionMenu} wrapper={wrapperActions} />
        {content && content}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
